let { form, $, table, layer, upload,laydate } = layui;
const { createEditor, createToolbar,} = window.wangEditor;
let tmpHtml="";
export default class Add {
  constructor() {
    this.render(); //渲染在页面上
    this.handle()  //动态js
  }
  render() {
    let template = `
        <form class="layui-form  addMessage" action="" lay-filter="addInfos">    
        <div class="layui-form-item addTitle ">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item addCreateTime">
                <label class="layui-form-label">发表时间</label>
                <div class="layui-input-inline">
                  <input type="text" name="createTime" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>

        <div class="layui-form-item addreateTime">
          <label class="layui-form-label">浏览人数</label>
          <div class="layui-input-inline">
            <input type="text" name="watches" required lay-verify="required" placeholder="" autocomplete="off"
              class="layui-input">
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">新增文本</label>
            <div class="layui-input-inline" style="border: 1px solid;width: 600px;margin-left:50px">
              <div id="toolbar-container" style="width: 600px;"></div>
              <div id="editor-container" style="width: 600px;height: 200px;"></div>
            </div>
        </div>
      </form>
        `;
    $("#addTemplate").html(template);
  }
  handle() {
    layer.open({
      type: 1,
      title: '添加资讯信息',
      skin: 'layui-layer-molv',
      content: $("#addTemplate").html(),
      area: ['700px', '700px'],
      btn: ["确定", "取消"],
      success: function () { //因为之前在页面上渲染过一次了，这是再次渲染表单数据
        form.render();  //渲染radio
        laydate.render({
          elem: '[name=createTime]',//弹出层的日期name=time
          type:'datetime'
        });
        const editorConfig = {
          placeholder: "请输入内容",
          MENU_CONF: {  //上传照片必须有这个
            uploadImage: {
              // 小于该值就插入 base64 格式（而不上传），默认为 0
              base64LimitSize: 1024 * 1024 * 10, // 10M
            },
          },
          onChange(editor) {
            // 当编辑器选区、内容变化时，即触发
            tmpHtml = editor.getHtml();
            console.log(tmpHtml);
          },
        };
         // 创建编辑器
         const editor = createEditor({
          selector: '#editor-container',
          config: editorConfig,
          mode: 'default', //默认模式 - 集成了 wangEditor 所有功能
          })
          // 创建工具栏
          const toolbar = createToolbar({
          editor,
          selector: '#toolbar-container',
          mode: 'default'
          })
      },
      yes: function (index, layero) {
        let data = form.val("addInfos");//获取表单区域所有值
        console.log(data);
        $.ajax({
          type: "post",
          url: "/infos/",
          data: {
            ...form.val("addInfos"),  //拓展运算符，获取弹出层和富文本的内容
            content:tmpHtml,
          },
          success(res) {
            layer.alert("添加成功")
            table.reload("infosTable", {
              where: {} //防止搜索后点击增加信息，不显示出来 与搜索的where相对应
            }); //重新加载
            layer.close(index);//自动关闭对话框
          }
        })
      }
    });
  }
}